<template>
  <view class="p-32">
    <uv-navbar title="意见反馈" placeholder autoBack fixed></uv-navbar>
    <view class="box p-30">
      <view class="flex-bet-ali m-b-25">
        <text class="font-32 font-weight-middle">意见反馈</text>
        <text class="text-greey font-26 font-weight-middle">{{ formData.content.length }}/100</text>
      </view>
      <textarea class="info m-b-30" maxlength="100" v-model="formData.content" placeholder="请填写反馈说明" />
      <view class="flex-bet-ali m-b-25">
        <text class="font-32 font-weight-middle">图片(选填，提供问题和截图)</text>
        <text class="text-greey font-26 font-weight-middle">{{ formData.image.length }}/4</text>
      </view>
      <uv-upload width="174rpx" height="174rpx" :fileList="formData.image" @afterRead="afterRead" @delete="deletePic"
        multiple :maxCount="4" :previewFullImage="true"></uv-upload>
    </view>
    <view class="position-fixed bottom-0 m-b-70 m-l-12">
      <dy-button width="670rpx" @click="sub">提交</dy-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { baseUrl } from '../../api/app';
import { useCounter } from '@/mixins/userHooks';
import { LoginCenterApi } from '../../api/serves';
const { tool } = useCounter();
const formData = ref({ content: '', image: [] });
const deletePic = (event) => {
  const uploadingImages = formData.value.image.filter(item => item.status === 'uploading');
  if (uploadingImages.length > 0) {
    return tool.alert('图片正在上传中，请稍候');
  }
  formData.value.image.splice(event.index, 1);
};
// 提交
const sub = async () => {
  const uploadingImages = formData.value.image.filter(item => item.status === 'uploading');
  if (uploadingImages.length > 0) {
    return tool.alert('图片正在上传中，请稍候');
  }
  let image = formData.value.image.map((item) => item.url);
  console.log(image);
  let { code, data, msg } = await LoginCenterApi.feedback({ content: formData.value.content, image });
  if (code != 1) return tool.alert(msg);
  tool.alert('提交成功');
  setTimeout(() => {
    tool.jump_back();
  }, 1000);
};
// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = formData.value.image.length;
  lists.map((item) => {
    formData.value.image.push({
      ...item,
      status: 'uploading',
      message: '上传中'
    });
  });
  console.log(formData.value.image, 'formData.value.image');
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = formData.value.image[fileListLen];
    formData.value.image.splice(
      fileListLen,
      1,
      Object.assign(item, {
        status: 'success',
        message: '',
        url: result
      })
    );
    fileListLen++;
  }
};
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: baseUrl + 'upload_img', // 仅为示例，非真实的接口地址
      filePath: url,
      name: 'file',
      header: {
        token: tool.storage('token').token
      },
      success: (res) => {
        res = JSON.parse(res.data);
        resolve(res.data.src);
      }
    });
  });
};
</script>
<style>
page {
  background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
::v-deep .uv-upload__button {
  border-radius: 12rpx !important;
}

::v-deep .uv-upload__wrap__preview__image {
  border-radius: 12rpx !important;
}

.info {
  height: 255rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
  background: #f8f8f8;
  padding: 24rpx;
  font-size: 26rpx;
}

.box {
  border-radius: 16rpx;
  background: #fff;
}

::v-deep .u-upload__wrap {
  column-gap: 32rpx;
}
</style>
